const news = {
    props: {
        options: {
            type: Object,
            default: () => ({})
        },
        type: {
            type: String,
            default: 'long' // simple , hot
        },
        titleFontSize: String | Number
    },
    data() {
        return {
        }
    },
    computed: {
        imgUrl() {
            if (Object.keys(this.options).length === 0) {
                return
            }
            if (!this.options.infographic) {
                return this.options.img
            } else {
                return this.options.infographic
            }
        },
        style() {
            return {
                fontSize: `${this.titleFontSize}px`
            }
        }
    },
    mounted() {
        const io = new IntersectionObserver((entries) => {
            entries.forEach(item => {
                if (item.isIntersecting && Object.keys(item.target.dataset).length > 0) {
                    item.target.src = item.target.dataset.src
                    io.unobserve(item.target)
                }
            })
        });
        if (this.type !== 'simple') {
            this.$nextTick(() => {
                io.observe(this.$refs.imgs)
            })
        }
    },
    methods: {
        handleToDetail() {
            return `./detail.html?id=${this.options.id}&typeName=${encodeURIComponent(this.options.name)}`
        }
    },
    template: `
        <div class="long newsbox" v-if="type == 'long'">
            <a :href="handleToDetail()"></a>
            <div class="long-title" :style="style">
                <span class="type">{{options.name}}</span>
                <h1 class="long-title-h1 text-overflow-ellipsis">{{options.title}}</h1>
            </div>
            <div class="long-desc">
                <span class="long-desc_span">{{options.information}}</span>
            </div>
            <div class="long-img">
                <img ref="imgs" :data-src="imgUrl" alt="long-img">
            </div>
        </div>
        
        <div class="simple newsbox" v-else-if="type == 'simple'">
            <a :href="handleToDetail()"></a>
            <span class="type">{{options.name}}</span>
            <h1 class="simple-title text-overflow-ellipsis" :style="style">{{options.title}}</h1>
            <span class="simple-desc text-overflow-ellipsis">{{options.information}}</span>
        </div>

        <div class="hot newsbox" v-else-if="type == 'hot'">
            <a :href="handleToDetail()"></a>
            <div class="hot-img">
                <img ref="imgs" :data-src="imgUrl" alt="hot-img">
            </div>
            <span class="hot-desc text-overflow-ellipsis">{{options.information}}</span>
            <h1 class="hot-title text-overflow-ellipsis" :style="style">{{options.title}}</h1>
        </div>
    `
}